.device{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .home-nav{
    box-shadow: 0rpx 2rpx 9rpx 1rpx
    rgba(188, 188, 192, 0.18);
    z-index: 1;
    position: relative;
    .nav-tab{
      display: flex;
      align-items: center;
      .back-wrapper{
        padding: 10rpx 40rpx;
        display: flex;
        .back{
          width: 20rpx;
          height: 34rpx;
        }
      }
      .tab-name{
        font-size: 24rpx;
        color: #7d7d7d;
        transition: all 0.1s linear;
        padding: 10rpx 0;
      }
      .tab-name-one{
        margin-right: 34rpx;
      }
      .tab-name-active{
        font-size: 34rpx;
        color: #0e0e0e;
        font-weight: 700;
      }
    }
  }
  .hidden-content {
    display: none !important;
  }
  .down-wrapper{
    flex: 1;
    height: 0;
    .show-content{
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .select-wrapper{
        height: 76rpx;
        background-color: #ffffff;
        box-shadow: 0rpx 0rpx 6rpx 0rpx
        rgba(36, 31, 27, 0.08);
        border-radius: 14rpx;
        width: 700rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 25rpx auto 0 auto;
        padding: 0 30rpx;
        position: relative;
        z-index: 10;
        .name-t{
          font-size: 24rpx;
          color: #000000;
          font-weight: 600;
        }
        .img-wrapper{
          padding: 20rpx;
          .img{
            width: 18rpx;
            height: 10rpx;
          }
        }
      }
      .select-wrapper-two{
        margin: 0;
        padding: 0 55rpx;
        width: 100%;
        border-radius: 0;
      }
      .list-wrapper{
        width: 100%;
        height: 0;
        flex: 1;
        .list-display{
          display: flex;
          flex-wrap: wrap;
          .list-item-inner{
            width: 50%;
            &:first-child{
              //padding-top: 25rpx;
            }
            &:nth-child(odd){
              padding: 25rpx 12.5rpx 0 25rpx;

            }
            &:nth-child(even){
              padding: 25rpx 25rpx 0 12.5rpx;
            }
            .list-item{
              background-color: #ffffff;
              box-shadow: 0rpx 2rpx 8.5rpx 0.5rpx
              rgba(188, 188, 192, 0.18);
              border-radius: 14rpx;
              padding: 26rpx 0 20rpx 20rpx;
              margin-bottom: 25rpx;
              position: relative;
              .i-l{
                .img-icon{
                  width: 42rpx;
                  height: 72rpx;
                }
                .t-name{
                  font-size: 24rpx;
                  color: #000000;
                  font-weight: 600;
                  margin-bottom: 11px;
                  margin-top: 28rpx;
                  line-height: 1;
                }
                .t-time{
                  font-size: 20rpx;
                  color: #b8b8b8;
                  line-height: 1;
                }
              }
              .i-r{
                position: absolute;
                right: 32rpx;
                top: 50%;
                transform: translateY(-50%);
                width: 150rpx;height: 150rpx
              }
              .i-r-btn{
                width: 81rpx;
                height: 36rpx;
                line-height: 36rpx;
                font-size: 20rpx;
                color: #ffffff;
                position: absolute;
                right: 0;
                top: 0;
                background-color: #016fe5;
                border-radius: 0rpx 14rpx 0rpx 14rpx;
                text-align: center;
              }
              .error-line{
                width: 81rpx;
                height: 36rpx;
                line-height: 36rpx;
                font-size: 20rpx;
                color: #ffffff;
                position: absolute;
                right: 0;
                top: 0;
                background-color: #ff5252;
                border-radius: 0rpx 14rpx 0rpx 14rpx;
                text-align: center;
              }
              .btn-ing{
                background-color: #fff8e8;
                color: #f0b62b;
              }
              .btn-overdue{
                background-color: #f4f4f4;
                color: #c1c1c1;
              }
            }
          }
        }
        .list-wrapper-inner{
          width: 100%;
          padding: 25rpx 25rpx 40rpx 25rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-end;
          flex-wrap: wrap;
          margin-top: 25rpx;
          background: #ffffff;
          .ui-item-wrapper{
            position: relative;
            &:first-child{
              .ul-item{
                margin-top: 0;
              }
            }
            .ul-item{
              position: relative;
              background: #ffffff;
              border-radius: 14rpx;
              box-sizing: border-box;
              padding: 56rpx 20rpx 100rpx 20rpx;
              margin-top: 20rpx;
              width: 563rpx;
              .work-order-status{
                position: absolute;
                top: 29rpx;
                right: 22rpx;
                font-size: 28rpx;
                font-weight: bold;
              }
              .in-service{
                color: #f68d33;
              }
              .done-service{
                color: #d7d7d7;
              }
              .ul-li{
                font-size: 0;
                margin-bottom: 19rpx;
                position: relative;
                .ib{
                  display: inline-block;
                  vertical-align: top;
                }
                .item-img{
                  margin-right: 18rpx;
                }
                .item-img-1{
                  width: 28rpx;
                  height: 20rpx;
                }
                .item-img-2{
                  width: 28rpx;
                  height: 28rpx;
                }
                .item-img-3{
                  width: 28rpx;
                  height: 26rpx;
                }
                .item-img-4{
                  width: 26rpx;
                  height: 26rpx;
                  margin-left: 1rpx;
                }
                .label{
                  font-size: 20rpx;
                  color: #949494;
                }
                .title-top{
                  min-width: 174rpx;
                  overflow: hidden;
                  white-space: wrap;
                  max-width: 174rpx;
                }
                .value{
                  font-size: 24rpx;
                  color: #000000;
                }
              }
              .last-item{
                margin-bottom: 33rpx !important;
              }
              .work-order-detail-wrapper{
                display: flex;
                justify-content: flex-end;
                .work-order-detail{
                  width: 158rpx;
                  height: 60rpx;
                  border-radius: 30rpx;
                  border: solid 1rpx #c7c7c7;
                  text-align: center;
                  line-height: 60rpx;
                  font-size: 24rpx;
                  color: #4c4c4c;
                  margin-top: 17rpx;
                }
              }
            }
            .item-left{
              position: absolute;
              left: -23px;
              width: 1px;
              height: 100%;
              background:  #b2b2b2;
              top: 0;
              transform: scaleX(0.5);
            }
            .circle-wrapper{
              position: absolute;
              left: -32px;
              padding: 6px;
              background: #ffffff;
              top: 57rpx;
              .circle{
                width: 8px;
                height: 8px;
                box-sizing: border-box;
                border-radius: 50%;
              }
              .new-circel{
                border: 2px solid #016ae3;
                background: #ffffff;
              }
              .old-circel{
                background: #cacaca;
              }
              .time-num{
                font-size: 24rpx;
                color: #cacaca;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: calc(100% + 12rpx);
                text-align: center;
                .new{
                  width: 75rpx;
                  height: 33rpx;
                  text-align: center;
                  line-height: 33rpx;
                  background-image: linear-gradient(-45deg,
                  #019cf8 0%,
                  #0165e1 100%),
                  linear-gradient(
                          #000000,
                          #000000);
                  background-blend-mode: normal,
                  normal;
                  border-radius: 3rpx;
                  font-size: 20rpx;
                  color: #ffffff;
                }
              }
            }
            .time-w{
              display: flex;
              justify-content: center;
              font-size: 24rpx;
              color: #343434;
              align-items: center;
              margin-top: 40rpx;
              margin-bottom: 20rpx;
              .solid{
                height: 1px;
                background-color: #b2b2b2;
                width: 155rpx;
                transform: scaleY(0.5);
              }
              .time-c{
                margin: 0 20rpx;
              }
            }
          }
        }
      }
      .add-btn{
        position: absolute;
        width: 100rpx;
        height: 100rpx;
        background-image: linear-gradient(-45deg,
        rgba(1, 102, 225, 0.87) 0%,
        rgba(1, 156, 248, 0.87) 100%),
        linear-gradient(
                #b9b9b9,
                #b9b9b9);
        background-blend-mode: normal,
        normal;
        box-shadow: 0rpx 0rpx 13rpx 0rpx
        rgba(67, 143, 255, 0.8);
        right: 33rpx;
        bottom: 52rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        .add-img{
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
  .popup-cl{
    .dev-name{
      font-size: 28rpx;
      font-weight: 500;
      text-align: center;
      margin-top: 3.973vh;
      margin-bottom: 2.999vh;
    }
    .dev-icon{
      width: 81rpx;
      display: block;
      margin: 0 auto 2.999vh auto;
    }
    .desc{
      font-size: 24rpx;
      color: #7f7f7f;
      text-align: center;
    }
    .btn-group{
      display: flex;
      padding: 5.547vh 85rpx 4.123vh 85rpx;
      justify-content: space-between;
      font-weight: 500;
      .btn-w{
        width: 255rpx;
        height: 82rpx;
        font-size: 30rpx;
        line-height: 82rpx;
        border-radius: 40.842rpx;
        text-align: center;
      }
      .cancel{
        color: #8c8c8c;
        background-color: #fafafa;
      }
      .ok{
        color: #016fe5;
        background-color: #fafafa;
      }
      .ok-detail{
        color: #ffffff;
        background-image: linear-gradient(-45deg,
        #019cf8 0%,
        #0165e1 100%),
        linear-gradient(
                #fafafa,
                #fafafa);
      }
    }
  }
  .cur{
    display: block !important;
    opacity: 1 !important;
  }
  .selected-community{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    transition: all .2s linear;
    opacity: 0;
  }
  .content-wrapper{
    position: fixed;
    top: 11.094vh;
    z-index: 100001;
    width: 710rpx;
    left: 20rpx;
    display: none;
    background-color: #ffffff;
    box-shadow: 0rpx 0rpx 6rpx 0rpx
    rgba(36, 31, 27, 0.08);
    border-radius: 14rpx;
    padding: 26rpx 34rpx 29rpx 34rpx;
    .top-title{
      font-size: 24rpx;
      color: #000000;
      font-weight: 500;
    }
    .list-community{
      margin-top: 25rpx;
      .community-item{
        padding: 10rpx 20rpx;
        background-color: #efefef;
        border-radius: 4px;
        font-size: 20rpx;
        color: #656565;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 20rpx;
        margin-right: 20rpx;
      }
      .active-item{
        background-image: linear-gradient(-45deg,
        #0166e1 0%,
        #019cf8 100%),
        linear-gradient(
                #efefef,
                #efefef);
        color: #ffffff;
      }
    }
  }
}
